<template>
  <div class="app">
    <h1>App</h1>
    <p>接收到的学校信息:{{ schoolMessage }}</p>
    <p>接收到的学生信息:{{ studentMessage }}</p>

    <school-com></school-com>

    <student-com></student-com>
  </div>
</template>

<script>
// 引入School组件
import Student from "./components/Student.vue";
import School from "./components/School.vue";

export default {
  name: "App",
  components: {
    "student-com": Student,
    "school-com": School,
  },
  data() {
    return {
      schoolMessage: "",
      studentMessage: "",
    };
  },
  mounted() {
    this.$bus.$on("getSchool-message", (...val) => {
      // console.log(val);
      // console.log(this);
      this.schoolMessage = val;
    });
    this.$bus.$on("getStudent-message", (...val) => {
      this.studentMessage = val;
    });
  },
  beforeDestroy() {
    this.$bus.$off("getSchool-message");
    this.$bus.$off("getStudent-message");
  },
};
</script>

<style lang="sass">
$padding: 10px
$margin: 10px

.app
  background-color: gray
  padding: $padding

  h1
    background-color: pink
    text-align: center
    margin: $margin

  p
    background-color: yellowgreen
    padding: $padding
    margin: $margin
</style>
